<template>
	<div>
		<!-- 添加或修改设备对话框 -->
		<el-dialog
			:visible.sync="open"
			:title="title"
			class="config-model"
			width="90%"
		>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-row
						type="flex"
						align="middle"
					>
						<el-col :span="6">设备编号:</el-col>
						<el-col :span="18">
							<el-input
								size="small"
								v-model="form.name"
								placeholder="请输入设备编号"
							></el-input>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="6">
					<el-row
						type="flex"
						align="middle"
					>
						<el-col :span="6">设备类型:</el-col>
						<el-col :span="18">
							<el-input
								size="small"
								v-model="form.sensorType"
								placeholder="请输入设备类型"
							></el-input>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="6">
					<el-row
						type="flex"
						align="middle"
					>
						<el-col :span="6">设备名称:</el-col>
						<el-col :span="18">
							<el-input
								size="small"
								v-model="form.sensorType"
								placeholder="请输入设备名称"
							></el-input>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="6">
					<el-row
						type="flex"
						align="middle"
					>
						<el-col :span="6">监测内容:</el-col>
						<el-col :span="18">
							<el-input
								size="small"
								v-model="form.sensorType"
								placeholder="请输入监测内容"
							></el-input>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6">
					<el-row
						type="flex"
						align="middle"
					>
						<el-col :span="6">设备状态:</el-col>
						<el-col :span="18">
							<el-input
								size="small"
								v-model="form.pointName"
								placeholder="请输入测点名称"
							></el-input>
						</el-col>
					</el-row>
				</el-col>
				<el-col :span="6">
					<el-row
						type="flex"
						align="middle"
					>
						<el-col :span="6">维修次数:</el-col>
						<el-col :span="18">
							<el-input
								size="small"
								v-model="form.sensorType"
								placeholder="请输入设备维修次数"
							></el-input>
						</el-col>
					</el-row>
				</el-col>
				<el-col
					:span="12"
					class="threshold-value"
				>
					<el-row
						ref="testGetElementRow"
						type="flex"
						align="middle"
					>
						<!-- 写的过程看下面的updateDialogStyle() -->
						<div ref="setAlarmWidth">告警阈值:</div>
						<div
							ref="setAlarmValueWidth"
							style="display: flex; justify-content: space-between;"
						>
							<el-input
								size="small"
								v-model="form.thresholdValue.first"
								placeholder="一级阈值临界点"
							/>
							<el-input
								size="small"
								v-model="form.thresholdValue.second"
								placeholder="二级阈值临界点"
							/>
							<el-input
								size="small"
								v-model="form.thresholdValue.third"
								placeholder="三级阈值临界点"
							/>
						</div>
					</el-row>
				</el-col>
			</el-row>
			<el-row
				:gutter="23"
				style="margin-top:8px"
			>
				<el-col :span="12">
					<div class="set-site">
						<div class="site-title">设备地理位置</div>
						<el-input
							size="small"
							v-model="form.site.address"
							placeholder="请输入地址信息"
						/>
						<el-input
							size="small"
							width="100px"
							v-model="form.site.lon"
							placeholder="请输入经度"
						/>
						<el-input
							size="small"
							width="100px"
							v-model="form.site.lat"
							placeholder="请输入维度"
						/>
						<el-button
							icon="el-icon-search"
							size="mini"
							@click="searchSite"
							type="primary"
						>搜索</el-button>
					</div>
					<div class="set-site-input">
						<div style="height: 415px">
							<!-- 地图 -->
							<xdh-map
								ref="map"
								type="Amap"
								:zoom="10"
								:min-zoom="5"
								:max-zoom="18"
								@pointermove="handleMove"
								:layer-config="layerConfig"
								@ready="readyHandle"
							/>
							</xdh-map>
						</div>
					</div>
				</el-col>
				<el-col :span="12">
					<div class="set-site">设备三维位置</div>
					<div class="set-site-input">
						<!-- 三维展示 -->
						<img
							src="../config/testShow.png"
							width="100%"
							height="415px"
						/>
					</div>
				</el-col>
			</el-row>
			<div
				slot="footer"
				class="dialog-footer"
			>
				<el-button
					type="primary"
					@click="submitForm"
				>确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import conScss from "../config/config.scss";
	export default {
		name: "show-dialog",
		...conScss,
		components: {},
		props: {
			// 是否是查看模式
			isShowView: false,
			// 弹出层标题
			title: "",
			// 是否显示弹出层
			open: false,
			// 表单参数
			form: {
				name: "",
				sensorType: "",
				number: "",
				imei: "",
				pointName: "",
				site: {
					address: "",
					lon: "",
					lat: ""
				},
				thresholdValue: {
					first: "",
					second: "",
					third: ""
				}
			}
		},
		data() {
			return {
				/** 地图相关 */
				olMap: null,
				coordinate: [],
				layerConfig: {
					Amap: {
						title: "高德",
						server:
							"https://webst01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&style=6"
					}
				}
			};
		},
		created() {},
		methods: {
			/** 提交按钮 */
			submitForm: function() {
				this.$refs["form"].validate(valid => {
					if (valid) {
						if (this.form.roleId != undefined) {
							this.form.menuIds = this.getMenuAllCheckedKeys();
							updateRole(this.form).then(response => {
								if (response.code === 200) {
									this.msgSuccess("修改成功");
									this.open = false;
									this.getList();
								} else {
									this.msgError(response.msg);
								}
							}).catch((error)=>{
								console.log(error);
							});
						} else {
							this.form.menuIds = this.getMenuAllCheckedKeys();
							addRole(this.form).then(response => {
								if (response.code === 200) {
									this.msgSuccess("新增成功");
									this.open = false;
									this.getList();
								} else {
									this.msgError(response.msg);
								}
							}).catch((error)=>{
								console.log(error);
							});
						}
					}
				});
			},
			/** 取消添加 */
			cancel() {
				let self = this;
				self.open = false;
			},
			/** 位置搜索 */
			searchSite() {
				console.log("位置搜索");
			},
			readyHandle(map, mapComp) {
				this.olMap = map;
			},
			handleMove(e) {
				this.coordinate = e.coordinate;
			},

			/** 修改弹框样式 */
			updateDialogStyle() {
				let self = this;
				let bodyWidth = window.innerWidth; // 浏览器宽度
				let elRowWidth = bodyWidth * 0.9 - 20 * 2 - -10 * 2; // 弹框el-row宽度  弹框的：padding:30px 20px el-row的：margin: 0px -10px
				let onceElColWidth = elRowWidth / 4 - 10 * 2; // 一对el-col宽度 平均分为4分 el-col带有padding: 0px 10px;
				let labelWidth = onceElColWidth * 0.25; // 表头宽度 取6/24
				let alignWidth = onceElColWidth + 160 + 10 * 2; // 阈值值宽度 一个el-col去掉表头，加一个表头，加上第一个的右边距10px，第二个的左边距10px
				setTimeout(function() {
					// 解决vue比element先执行问题
					console.log(self.$refs.testGetElementRow);
					self.$refs.setAlarmWidth.style.width = labelWidth + "px";
					self.$refs.setAlarmValueWidth.style.width = alignWidth + "px";
					console.log(
						bodyWidth,
						elRowWidth,
						onceElColWidth,
						self.$refs.setAlarmWidth.style.width,
						self.$refs.setAlarmValueWidth.style.width
					);
				}, 0);
			}
		}
	};
</script>
